﻿{extend name="public:base" /}

{block name="css"}
<link href="/static/bootstrap/css/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="__PLUG__/jquery-treegrid-master/css/jquery.treegrid.min.css">

<style lang="less">
    .fixed-table-body {
        overflow-x: auto;
        overflow-y: auto;
        height: auto;
    }

    .fixed-table-container .bs-checkbox .th-inner {
        padding: 14px 0;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        border-top: 1px solid #e7eaec;
        line-height: 1.42857;
        padding: 8px;
        vertical-align: inherit;
        text-align: revert;
    }

    .screen-box{
        display: flex;

        .btn{
            margin-left: 10px;
        }
    }

    select.form-control:not([size]):not([multiple]) {
        height: 2.3rem;
    }

    .btn-box {
        display: flex;
        justify-content: flex-end;
        flex: 1;
        flex-shrink: 0;

        .btn {
            padding: 2px 8px;
            border-radius: 6px;
            background: #1ab394;
            color: #fff;
        }

        .ai-btn {
            background: #fa9d3b;
            margin-right: 5px;
        }
    }

    .comment-box {
        display: flex;
        flex-direction: column;

        .textarea {
            outline: none;
            padding: 4px;
            border-radius: 5px;
        }

        .btn {
            padding: 2px 8px;
            border-radius: 6px;
            background: #1ab394;
            color: #fff;
            margin-top: 10px;
        }
    }
</style>{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                        <div class="screen-box search-form">
                            <select class="select form-control col-sm-2" name="video_id" style="margin-left: 5px">
                                {volist name="video_list" id="vo"}
                                <option value="{$vo.id}" {$vo.id == input('video_id') ? 'selected' : ''}>{$vo.id}、{$vo.description}</option>
                                {/volist}
                            </select>

                            <select class="select form-control col-sm-2" name="is_reply" style="margin-left: 10px">
                                <option value="0" {input('is_reply') == 0 ? 'selected' : ''}>未回复</option>
                                <option value="1" {:input('is_reply') == 1 ? 'selected' : ''}>已回复</option>
                            </select>

                            <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                        </div>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="iconfont icon-chevron-up"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <table id="table"></table>
                    <button type="button" class="btn btn-primary btn-lg" style="margin-top: 14px">一键评论</button>
                </div>

            </div>
        </div>
    </div>

</div>{/block}

{block name="js"}
<script src="/static/bootstrap/js/bootstrap-table.min.js"></script>
<script src="__PLUG__/jquery-treegrid-master/examples/bootstrap-table-treegrid.js"></script>
<script src="__PLUG__/jquery-treegrid-master/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
    var $table = $('#table');
    var data = {$list};

    $(function () {
        $table.bootstrapTable({
            data: data,
            idField: 'id',
            dataType: 'jsonp',
            columns: [
                {
                    field: 'check', checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                            console.log(row);
                            //设置选中
                            return {checked: true};
                        }
                    }
                },
                {field: 'video_thumbUrl', title: '视频缩略图', align: 'center', width: 100, formatter: 'formatThumb'},
                {field: 'video_description', title: '视频简介', align: 'center', width: 240},
                {field: 'commentContent', title: '评价内容', align: 'center', width: 260},
                {field: 'reply_list', title: '快捷回复', width: 300, formatter: 'formatQuickReply'},
                {field: 'reply_content', title: '回复内容', width: 300, align: 'center', formatter: 'formatReply'},
                // {field: 'id', title: 'ID', sortable: true, align: 'center'},
                // {field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
            ],

            // bootstrap-table-treegrid.js 插件配置 -- start

            //在哪一列展开树形
            treeShowField: 'content',
            //指定父id列
            parentIdField: 'replyCommentId',

            onResetView: function (data) {
                //console.log('load');
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    // initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        $table.bootstrapTable('resetWidth');
                    }
                });

                //只展开树形的第一级节点
                $table.treegrid('getRootNodes').treegrid('expand');

            },
            onCheck: function (row) {
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas, row, "id", "pid", true);

                // 勾选父类
                selectParentChecked(datas, row, "id", "pid")

                // 刷新数据
                $table.bootstrapTable('load', datas);
            },

            onUncheck: function (row) {
                var datas = $table.bootstrapTable('getData');
                selectChilds(datas, row, "id", "pid", false);
                $table.bootstrapTable('load', datas);
            },
            // bootstrap-table-treetreegrid.js 插件配置 -- end
        });
    });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        var buttons = [
            '<a href="#" class="editButton btn btn-white btn-sm" style="margin-left: 5px;"><i class="iconfont icon-edit"></i> 编辑 </a>',
            '<a href="#" class="deleteButton btn-white btn-sm" style="margin-left: 5px;"><i class="iconfont icon-trash"></i> 删除 </a>'
        ].join('');

        if (row.pid == 0) buttons = '<a href="#" class="addButton btn btn-white btn-sm"><i class="iconfont icon-plus" ></i> 新增 </a>' + buttons;

        return buttons
    }

    // 视频缩略图
    function formatThumb(value, row, index) {
        return `<img src="${value}" style="width: 50px; height: 70px; object-fit: cover; border-radius: 5px" />`
    }

    // 快捷回复
    function formatQuickReply(value, row, index) {
        var option = '';
        if (value.length > 0) {
            value.forEach(val => {
                option += '<option value="' + val.id + '">' + val.msg + '</option>'
            })
        }

        return `<div style="display: flex">` +
          `<select class="form-control quick-select" style="width: 270px;">` + option + '</select>' +
          `<div class="btn-box">` +
          `<button class="btn ai-btn" onclick="useAIMsg(${row.id}, ${index})">AI优化</button>` +
          `<button class="btn" onclick="useMsg(${row.id}, ${index})">使用</button>` +
          `</div>` +
          `</div>`;
    }

    // AI优化
    function useAIMsg(comment_id, index) {
        var select = $('.quick-select').eq(index),
          quick_id = select.find('option:selected').val(),// 快捷回复id
          msg = select.find('option:selected').text();

        if (!msg) {
            layer.msg('AI回复失败', {icon: 2});
            return false;
        }

        layer.load(1);

        $.post('/index/Api/AIQuickReply', {
            msg
        }, res => {
            layer.closeAll();
            if (res.result == 1) {
                $('.quick-reply-id').eq(index).val(quick_id);
                $('.textarea').eq(index).val(res.data);
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'json')
    }

    // 使用快捷回复
    function useMsg(comment_id, index) {
        var select = $('.quick-select').eq(index),
          quick_id = select.find('option:selected').val(),// 快捷回复id
          msg = select.find('option:selected').text();

        $('.quick-reply-id').eq(index).val(quick_id);
        $('.textarea').eq(index).val(msg);
        $('.textarea').eq(index).data('value', msg);
    }

    // 回复内容
    function formatReply(value, row, index) {
        return '<div class="comment-box">' +
          '<textarea class="textarea" rows="3" cols="40" data-value="111"></textarea>' +
          '<input type="hidden" class="quick-reply-id" value="0">' +
          '<button class="btn">发送评论</button>' +
          '</div>';
    }

    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {
            return '菜单';
        }
        if (value === 'button') {
            return '按钮';
        }
        if (value === 'api') {
            return '接口';
        }
        return '-';
    }

    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="btn btn-primary btn-sm">正常</span>';
        } else {
            return '<span class="btn btn-warning btn-sm">锁定</span>';
        }
    }

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .addButton': function (e, value, row, index) {
            add(row.id);
        },
        'click .editButton': function (e, value, row, index) {
            update(row.id, row.pid, row.content);
        },
        'click .deleteButton': function (e, value, row, index) {
            del(row.id, row.pid);
        }
    };
</script>
<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas, row, id, pid, checked) {
        for (var i in datas) {
            if (datas[i][pid] == row[id]) {
                datas[i].check = checked;
                selectChilds(datas, datas[i], id, pid, checked);
            }
        }
    }

    function selectParentChecked(datas, row, id, pid) {
        for (var i in datas) {
            if (datas[i][id] == row[pid]) {
                datas[i].check = true;
                selectParentChecked(datas, datas[i], id, pid);
            }
        }
    }

    /**
     * 新增分类
     * */
    function addModelOpen() {
        data_pid = 0;
        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal3').css('display', 'block').addClass('show');

        var option = '<option value="0">顶级</option>';
        data.forEach(function (val) {
            if (val.pid == 0) option += "<option value='" + val.id + "'>" + val.content + "</option>";
        })
        $('.typeSelect').html(option).show();
    }

    $('.typeSelect').change(function () {
        data_pid = $(this).val();
    })

    /**
     * 列表新增分类
     * */
    function listAddModelOpen(id) {
        data_pid = id;

        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal3').css('display', 'block').addClass('show');
        $('.typeSelect').hide();
    }

    // 列表分类
    function listEditModelOpen(id, pid, conetent) {
        data_id = id;
        $('.content').val(conetent);

        if (pid > 0) {
            //编辑二级分类
            data_pid = 0;
            $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
            $('#myModal3').css('display', 'block').addClass('show');

            var option = '';
            console.log(data)
            data.forEach(function (val) {
                console.log(val)
                if (val.pid == 0) {
                    var selected = '';
                    if (pid == val.id) selected = 'selected';
                    option += "<option value='" + val.id + "' " + selected + ">" + val.keyword + "</option>";
                }
            })
            $('.typeSelect').html(option).show();

            data_pid = $('.typeSelect').val() ? $('.typeSelect').val() : 0;
        } else {
            //编辑一级分类
            data_pid = 0;

            $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
            $('#myModal3').css('display', 'block').addClass('show');
            $('.typeSelect').hide();
        }
    }

    function add(id) {
        this.listAddModelOpen(id);
        $('.modal-title').html('新增');
    }

    function del(id, pid) {
        var url = "/admin/manage/delQuickReply";
        $.post(url, {
            id: id,
            pid: pid
        }, function (res) {
            layer.msg(res.msg)
            if (res.result == 1) {
                modelClose();
                window.location.reload();
            }
        }, 'json')
    }

    function update(id, pid, conetent) {
        this.listEditModelOpen(id, pid, conetent);
        $('.modal-title').html('编辑');
    }

    /**
     * 关闭 规格-属性 弹框
     * */
    function modelClose() {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#myModal3').css('display', 'none').removeClass('show');
        $('.modal-title').html('新增');
        $('.content').val('');
        $('.typeSelect').find("option:selected").prop("selected", false);
        data_pid = 0;
        data_id = 0;
    }


    /**
     * 保存
     * */
    var data_pid = 0;
    var data_id = 0;
    $('#confirmSave').click(function () {
        var content = $('.content').val();

        if (!content) {
            layer.msg('请输入内容');
            return;
        }

        var url = "/admin/manage/doQuickReply";
        $.post(url, {
            id: data_id,
            pid: data_pid,
            content: content,
        }, function (res) {
            layer.msg(res.msg)
            if (res.result == 1) {
                modelClose();
                window.location.reload();
            }
        }, 'json')
    })
</script>{/block}
